打包html js为一个文件,在vue-cli中如何将所有js以及css打包成一个js文件

这样的需求不是很合理啊。具体参考楼上回答。

但非要实现也可以。

1、再怎么样，我也建议提取css建议。不然等待JS加载完，才显示样式。用户明显可以看出样式缺失，然后才有样式。

提取使用的插件是用的extract-text-webpack-plugin。

2、从vue-cli @2.9.x版本的build/webpack.prod.conf.js 来看，会提取公共的JS代码到mainfest.js,vendor.js,vendor-async.js。如果不需要就注释即可。

刚好之前写了篇分析vue-cli构建的文章，分析vue-cli@2.9.3 搭建的webpack项目工程，附上一些代码和注释可供参考。

// 提取公共代码

new webpack.optimize.CommonsChunkPlugin({

name: 'vendor',

minChunks (module) {

// any required modules inside node_modules are extracted to vendor

return (

module.resource &&

/\.js$/.test(module.resource) &&

module.resource.indexOf(

path.join(__dirname, '../node_modules')

) === 0

)

}

}),

// extract webpack runtime and module manifest to its own file in order to

// prevent vendor hash from being updated whenever app bundle is updated

// 提取公共代码

new webpack.optimize.CommonsChunkPlugin({

// 把公共的部分放到 manifest 中

name: 'manifest',

// 传入 `Infinity` 会马上生成 公共chunk，但里面没有模块。

minChunks: Infinity

}),

// This instance extracts shared chunks from code splitted chunks and bundles them

// in a separate chunk, similar to the vendor chunk

// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk

// 提取动态组件

new webpack.optimize.CommonsChunkPlugin({

name: 'app',

// 如果设置为 `true`，一个异步的  公共chunk 会作为 `options.name` 的子模块，和 `options.chunks` 的兄弟模块被创建。

// 它会与 `options.chunks` 并行被加载。可以通过提供想要的字符串，而不是 `true` 来对输出的文件进行更换名称。

async: 'vendor-async',

// 如果设置为 `true`，所有  公共chunk 的子模块都会被选择

children: true,

// 最小3个，包含3，chunk的时候提取

minChunks: 3

}),